<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/**
			 * 方法1：只初始化颜色数组，如果需要名字和值，再到数组中检索对应的标签文本
			 * 方法2：初始化两个数组，分别是颜色的名字和颜色的值，如果需要直接从数组中取
			 */
			let colorsName=[]
			let colorsValue=[]
			function init(){
				// 1.创建核心对象
				let xhr=new XMLHttpRequest()
				// 2.创建请求
				xhr.open("GET","color.xml",true)//true表示异步
				// 3.发送请求
				xhr.send()
				// 4.接收、解析、显示数据
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						let data=xhr.responseXML
						colorsName=data.querySelectorAll("color>name")
						colorsValue=data.querySelectorAll("color>value")
						// 将颜色的名字动态加载下拉列表中
						let s=document.querySelector("select")
						for (let i = 0; i < colorsName.length; i++) {
							// 第i个颜色的名字----->下拉列表的第i个选项中
							s.options[i]=new Option(colorsName[i].innerHTML)
						}
						document.body.setAttribute("style","background-color:"+colorsValue[0].innerHTML+";")
					}
				}
			}
			function change(){
				let s=document.querySelector("select")
				let index=s.selectedIndex
				document.body.setAttribute("style","background-color:"+colorsValue[index].innerHTML+";")
			}
		</script>
	</head>
	<body onload="init()">
		请选择网页背景色:<select onchange="change()"></select>
	</body>
</html>
